<template>
  <view class="index">
    <view class="jtop">
      <view class="status_bar"><!-- 这里是状态栏 --></view>
      <view class="jtop_l" @tap="navigateBack"
        ><image src="../../static/img/ic_back.png"></image
      ></view>
      <view class="jtop_c">通讯录</view>
      <!-- <view class="jtop_r" @tap="jshow_pop"><image src="../../static/img/index/ic_ellipsis.png"></image></view> -->
      <view class="jtop_r" @tap="add"
        ><image src="../../static/img/index/ic_add.png"></image
      ></view>
    </view>
    <view class="tophr"></view>
    <uni-search-bar
      placeholder="搜索"
      @confirm="search"
      class="ss"
      bgColor="#ffffff"
    ></uni-search-bar>

    <view v-if="topdr" @tap="getContacts" class="dr2">导入手机通讯录</view>

    <!-- 无内容 -->
    <view class="no" v-if="!nodata">
      <view class="no_t">
        <image
          src="../../static/img/index/2/ic_Material procurement_grey.png"
        ></image>
      </view>

      <view class="no_c">
        暂无通讯录
      </view>
      <view class="tj">
        <button type="primary" @tap="getContacts" class="dr">
          导入手机通讯录
        </button>

        <!-- <block  v-for="(item,index) in list" :key="index">
								<view>{{item.displayName}}</view>
						
								<block v-for="(subitem,idx) in item.phoneNumbers" :key="idx">
									<view>{{subitem.value}}</view>
								</block>
						</block> -->
      </view>
    </view>

    <!-- 		<view class="dus_t">
			最近联系人
		</view> -->
    <view class="dus_boxs" style="border: 0;" v-if="list.length > 0">
      <view class="dus_box" v-for="(item, index) in list" :key="index">
        <image
          src="../../static/img/index/new/ic_phone_blue.png"
          class="dus_box_s dus_box_sx"
          @click="pc(item.phoneNumbers[0])"
        ></image>
        <image
          :src="
            item.avatar ? item.avatar : '../../static/img/Default_avatar.png'
          "
          class="dus_box_tx"
          @tap="tel_more(item.id)"
        ></image>
        <view class="dus_box_l" @tap="tel_more(item.id)">
          <text class="dus_box_lt">{{ item.displayName }}</text>
          <text class="dus_box_lf">
            <block v-for="(subitem, idx) in item.phoneNumbers" :key="idx">
              <view>{{ subitem.value }}</view>
            </block>
          </text>
        </view>
      </view>
    </view>

    <view v-if="nodata">
      <view class="dus_boxs">
        <view class="dus_box" v-for="(item, index) in items" :key="item.id">
          <image
            src="../../static/img/index/new/ic_phone_blue.png"
            class="dus_box_s dus_box_sx"
            @click="pc(item.phone)"
          ></image>
          <image
            :src="
              item.avatar ? item.avatar : '../../static/img/Default_avatar.png'
            "
            class="dus_box_tx"
            @tap="tel_more(item.id)"
          ></image>
          <view class="dus_box_l" @tap="tel_more(item.id)">
            <text class="dus_box_lt">{{ item.name }}</text>
            <text class="dus_box_lf">{{ item.duty }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="dus_tl">
			甲方
		</view> -->
  </view>
</template>

<script>
import request from '@/common/request.js';
import { mapState } from 'vuex';

export default {
  computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
  data() {
    return {
      repeat_click: true,
      ashowpop: false,
      ashowpop_jrename: false,
      ashowpop_jdel: false,
      ashowpopT: false,
      bj: false,
      yd: false,
      nodata: true,
      items: [],
      jqeditid: '',
      ashowpop2: false,
      projectId: uni.getStorageSync('dqfull_name').id,
      list: [
        // {"displayName":"data_one","phoneNumbers":['15995131432','15995131433']},
        // {"displayName":"data_two","phoneNumbers":['15995131435']}
      ],
      topdr: false,
    };
  },

  onShow() {
    this.lb();

    if (uni.getStorageSync('dr')) {
      this.topdr = false;
    } else {
      this.topdr = true;
    }
  },

  methods: {
    getContacts: function() {
      var that = this;
      // 获取通讯录对象

      plus.contacts.getAddressBook(
        plus.contacts.ADDRESSBOOK_PHONE,
        function(addressbook) {
          // 					this.repeat_click = true;
          //uni.showToast({
          //     title: '获取通讯录对象成功',
          //     duration: 2000
          // })
          console.log('获取通讯录对象成功');
          console.log(addressbook);
          // 查找联系人
          addressbook.find(
            ['displayName', 'phoneNumbers'],
            function(contacts) {
              uni.showLoading({
                title: '导入中...',
              });

              console.log('获取联系人成功');
              console.log(JSON.stringify(contacts));

              var jd = {
                name: this.name,
                phone: this.phone,
                gender: this.index,
              };

              request({
                url: `/modor/v1/project/${
                  uni.getStorageSync('dqfull_name').id
                }/addrbook`,
                data: contacts,

                method: 'POST',
                success: openIdRes => {
                  console.log(openIdRes);
                  if (openIdRes.data.success == true) {
                    uni.setStorageSync('dr', 1);
                    that.list = contacts;

                    this.repeat_click = true;
                    uni.showToast({
                      title: '导入成功',
                      duration: 2000,
                    });
                    uni.hideLoading();

                    // uni.navigateBack()
                  } else {
                    uni.hideLoading();
                    this.repeat_click = true;
                    uni.showToast({
                      title: openIdRes.data.msg,
                      icon: 'none',
                    });
                  }
                },
                fail: () => {
                  this.repeat_click = true;
                  uni.showToast({
                    title: '服务器开小差，请稍后~',
                    icon: 'none',
                  });
                  return false;
                },
              });
            },
            function() {
              this.repeat_click = true;
              uni.showToast({
                title: '导入失败',
                duration: 2000,
              });
            },
            { multiple: true },
          );
        },
        function(e) {
          uni.setStorageSync('dr', 0);
          this.repeat_click = true;
          uni.showToast({
            title: '获取手机通讯录失败:' + e.message,
            duration: 2000,
          });
        },
      );
    },
    pc(e) {
      console.log(e);

      uni.makePhoneCall({
        phoneNumber: e,
      });
    },
    search(e) {
      console.log(e);
      this.lb(e.value);
    },

    lb(e) {
      var jd = {
        page: 1,
        size: 1000000,
      };

      if (e) {
        jd.key = e;
      }

      // 获取列表信息
      request({
        url: `/biz/addr-book/page`,
        method: 'GET',
        data: jd,

        success: res => {
          console.log('项目dd列表', res);
          console.log(res.data.data.rows.length);
          if (res.data.success == true) {
            if (res.data.data.rows.length > 0) {
              this.items = res.data.data.rows;
              console.log(this.items);
              this.nodata = true;
            } else {
              this.items = '';
              this.dqfull_name = '';
              this.nodata = false;
            }
          } else {
            this.repeat_click = true;
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
            });
          }
        },
        fail: () => {
          this.repeat_click = true;
          uni.showToast({
            title: '服务器开小差，请稍后~',
            icon: 'none',
          });
          return false;
        },
      });
    },

    navigateBack() {
      uni.navigateBack();
    },
    tel_more(e) {
      console.log(e);

      var jc = this.items.filter(item => {
        return item.id == e;
      });

      console.log(jc);

      uni.setStorageSync('jc', jc[0]);

      uni.navigateTo({
        url: '../main/tel_more',
      });
    },
    add() {
      uni.navigateTo({
        url: '../main/tel_add',
      });
    },
  },
};
</script>

<style>
.tophr {
  width: 100%;
  height: 88rpx;
}
.uni-searchbar {
  box-shadow: none;
}

.dr2 {
  width: 100%;
  height: 80rpx;
  display: block;
  float: left;
  font-size: 28rpx;
  line-height: 80rpx;
  color: #256aff;
  text-align: center;
  box-sizing: border-box;
}
.no {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 400rpx 0 0;
}
.no_t {
  width: 200rpx;
  height: 200rpx;
  display: block;
  float: left;
  margin: 0 275rpx;
  background: #ffffff;
  border-radius: 200rpx;
}
.no_t image {
  width: 140rpx;
  height: 140rpx;
  display: block;
  float: left;
  margin: 30rpx;
}
.no_c {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 30rpx 0 50rpx;
  color: #666666;
  font-size: 32rpx;
  line-height: 40rpx;
  text-align: center;
}
.no_f {
  width: 460rpx;
  height: 94rpx;
  line-height: 94rpx;
  background: #256aff;
  border-radius: 10rpx;
  display: block;
  float: left;
  margin: 0 145rpx;
  color: #ffffff;
  font-size: 36rpx;
  text-align: center;
}
.no_f:active {
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.199437),
      rgba(0, 0, 0, 0.199437)
    ),
    #256aff;
}

.tc {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: block;
}
.dus {
  width: 100%;
  height: 90rpx;
  display: block;
  float: left;
  border: 1px solid #dddddd;
  border-left: 0;
  border-right: 0;
  background: #ffffff;
}
.dusl {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  margin: 21rpx 22rpx 21rpx 30rpx;
}
.dusc {
  width: auto;
  height: 42rpx;
  font-size: 34rpx;
  line-height: 42rpx;
  color: #000000;
  display: block;
  float: left;
  margin: 24rpx 0;
}
.dusr {
  width: 16rpx;
  height: 25rpx;
  display: block;
  float: right;
  margin: 33rpx 30rpx 0 0;
}
.dus_t {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 24rpx;
  line-height: 32rpx;
  color: #999999;
  border-bottom: 1px solid #dddddd;
  padding: 0rpx 30rpx 20rpx;
  box-sizing: border-box;
}
.dus_tl {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 24rpx;
  line-height: 32rpx;
  color: #999999;
  padding: 4rpx 30rpx;
  box-sizing: border-box;
}
.dus_boxs {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  border: 1px solid #dddddd;
  border-left: 0;
  border-right: 0;
  background: #ffffff;
}
.dus_box {
  width: 720rpx;
  margin: 0 0 0 30rpx;
  height: 120rpx;
  display: block;
  float: left;
  background: #ffffff;
  border-bottom: 1px solid #dddddd;
}
.dus_boxs .dus_box:last-child {
  border: 0;
}
.dus_box_s {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: right;
  margin: 36rpx 30rpx 0 0;
}
.dus_box_tx {
  width: 84rpx;
  height: 84rpx;
  display: block;
  float: left;
  margin: 18rpx 20rpx 0rpx 0;
}
.dus_box_l {
  width: 500rpx;
  height: auto;
  display: block;
  float: left;
  margin: 0rpx 0 0rpx 0;
}
.dus_box_lt {
  width: 100%;
  height: 42rpx;
  display: block;
  float: left;
  margin: 18rpx 0 10rpx 0;
  font-size: 34rpx;
  line-height: 42rpx;
  color: #000000;
}
.dus_box_lf {
  width: 100%;
  height: 32rpx;
  display: block;
  float: left;
  margin: 0rpx 0 0rpx 0;
  font-size: 24rpx;
  line-height: 32rpx;
  color: #999999;
}
/* .dus_box_sx{ opacity: .5;} */

.dcf {
  width: 100%;
  height: 120rpx;
  display: block;
  float: left;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #ffffff;
  box-shadow: inset 0px 1px 0px #dddddd;
  z-index: 1000;
  padding: 18rpx 30rpx;
  box-sizing: border-box;
}
.dcf_tx {
  width: 84rpx;
  height: 84rpx;
  display: block;
  float: left;
  margin: 0rpx 20rpx 0rpx 0;
}
.dcf_t {
  width: auto;
  height: 84rpx;
  line-height: 84rpx;
  display: block;
  float: right;
  margin: 0rpx 0rpx 0rpx 0;
  font-size: 36rpx;
  color: #256aff;
}

.index {
  background: rgb(242, 242, 242);
  width: 100%;
  height: auto;
}
.jtop {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.jtop_l {
  width: auto;
  height: 88rpx;
  display: block;
  float: left;
  font-size: 32rpx;
  color: #000000;
  line-height: 88rpx;
  margin: 0 0 0 30rpx;
}
.jtop_l image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  margin: 20rpx 0 20rpx 0;
}
.jtop_r {
  width: auto;
  height: 88rpx;
  display: block;
  float: right;
  margin: 20rpx 20rpx 0 0;
  line-height: 88rpx;
  font-size: 32rpx;
  color: #000000;
  color: #256aff;
}
.jtop_r image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
}
.jtop_c {
  width: 70%;
  height: 48rpx;
  line-height: 48rpx;
  display: block;
  float: left;
  position: fixed;
  top: 20rpx;
  left: 15%;
  text-align: center;
  font-size: 36rpx;
  color: #000000;
}
.jtop_c image {
  width: 36rpx;
  height: 36rpx;
  display: inline-block;
  float: none;
  margin-bottom: -5rpx;
  margin-left: 5rpx;
}
.jtop_b {
  width: 100%;
  height: auto;
  background: #ffffff;
  position: fixed;
  top: 88rpx;
  left: 0;
  z-index: 1001;
}

.uni-searchbar {
  background: rgb(242, 242, 242);
}
.index .uni-searchbar__box {
  background: #ffffff !important;
}
.dr {
  width: 60%;
}
</style>
